<template>
  <div class="inN-Epidemic">
    <!-- 标题 -->
    <Title :title="'全国(含港澳台)'">
      <template #detail>
        <div class="title-time" v-if="!elSate">
          {{ init.msg.times }}数据统计
        </div>
        <el-button type="text" @click="centerDialogVisible = true">
          <el-tag size="mini">
            <i class="el-icon-warning"></i>
            数据说明
          </el-tag>
        </el-button>
      </template>
    </Title>

    <!-- 显示内容 -->
    <div v-if="!elSate" class="inN-body">
      <!-- 全国十大数据 -->
      <div class="ten-data">
        <div class="ten-pannel" v-for="item in tenList" :key="item.id">
          <div class="ten-title">{{ item.title }}</div>
          <div
            class="ten-value"
            :style="'color:#' + item.style"
            :class="item.num === '待公布' ? null : 'smallFont'"
          >
            {{ item.num }}
          </div>
        </div>
      </div>

      <!-- 近期 31 省区市本土疫情 -->
      <Title :title="'近期 ' + tableData.length + ' 省本土疫情 '">
        <template #detail>
          <div class="title-time">含港澳台</div>
        </template>
      </Title>
      <div class="local-data">
        <template>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            style="width: 100%"
            row-key="_id"
            lazy
            @sort-change="handleSortChange"
          >
            <el-table-column label="序号" type="index" align="center">
              <template #default="scope">
                <span v-text="getIndex(scope.$index)"></span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              v-for="item in tableColum"
              :key="item.prop"
              :prop="item.prop"
              :label="item.lable"
              :sortable="item.sortable"
            ></el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pageArr"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="tableData.length"
            ></el-pagination>
          </div>
        </template>
      </div>

      <!-- 境外输入top 10 -->
      <Title :title="'境外输入'"></Title>
      <div id="jwsr-chart">
        <chart-jwsr :jwsrTop="init.msg.jwsrTop" />
      </div>
    </div>

    <!-- 隐藏内容 -->
    <el-skeleton v-if="elSate" :rows="15" animated style="padding: 30px" />

    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="50%">
      <div>
        <div class="rule-txt-title">数据来源：</div>
        <p class="s">
          全部数据均来源于国家卫健委、各省市区卫健委、各省市区政府、港澳台官方渠道等公开数据。
        </p>
        <div class="rule-txt-title">实时数据统计规则：</div>
        <p class="s">
          <strong>·</strong>实时数据包括现存确诊、累计确诊、累计死亡、累计治愈
        </p>
        <p class="s">
          <strong>·</strong
          >实时数据会取各省市累加(全国累加数)、国家卫健委公布数据的最大值；
        </p>
        <p class="s">
          <strong>·</strong
          >各省市官方渠道每日会有当日新增病例报道，若各省市数据总和超过国家卫健委公布数据，则显示各省市数据总和。因各省市数据存在核减情况，故省新增与市新增累加会有不一致的情况；
        </p>
        <p class="s">
          <strong>·</strong
          >“较昨日”的数据使用当前全国累加数减去国家卫健委公布的前一日数据，此数值会根据实时数据发生变化；
        </p>
        <p class="s">
          <strong>·</strong
          >现存确诊&nbsp;=&nbsp;累计确诊&nbsp;-&nbsp;累计治愈&nbsp;-&nbsp;累计死亡&nbsp;，现存确诊及其较昨日数据会受确诊、死亡、治愈数据的变化而变化。
        </p>
        <div class="rule-txt-title">现存疑似、现存确诊重症数据说明：</div>
        <p class="s">
          <strong>·</strong
          >现存疑似、现存确诊重症及其“较昨日”数据，由于各省市未发布明细数据，故只采用国家每日公布的数据，国家当日公布之后直到次日公布均为固定值。
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ChartJwsr from './ChartJwsr/index.vue';
export default {
  components: { ChartJwsr },
  props: {
    fatherData: {
      type: Object
    }
  },
  data() {
    return {
      // 接收数据
      init: null,
      // 状态码
      state: null,
      // 是否显示
      elSate: true,
      // 十个数据
      tenList: [
        {
          id: 0,
          title: '新增本土确诊',
          num: null,
          style: 'a48256'
        },
        {
          id: 1,
          title: '新增确诊',
          num: null,
          style: 'c96161'
        },
        {
          id: 2,
          title: '新增境外',
          num: null,
          style: 'ffa200'
        },
        {
          id: 3,
          title: '现存本土确诊',
          num: null,
          style: 'b8540e'
        },
        {
          id: 4,
          title: '现存确诊',
          num: null,
          style: 'ff3535'
        },
        {
          id: 5,
          title: '现存重症',
          num: null,
          style: '8a101c'
        },
        {
          id: 6,
          title: '累计确诊',
          num: null,
          style: 'b10000'
        },
        {
          id: 7,
          title: '累计境外输入',
          num: null,
          style: 'fe6b22'
        },
        {
          id: 8,
          title: '累计治愈',
          num: null,
          style: '13b593'
        },
        {
          id: 9,
          title: '累计死亡',
          num: null,
          style: '666666'
        }
      ],
      // 表格组件数据
      tableData: null,
      tableColum: [
        { prop: 'name', lable: '省份', sortable: false },
        { prop: 'econNum', lable: '现存确诊', sortable: 'custom' },
        { prop: 'value', lable: '累计确诊', sortable: 'custom' },
        { prop: 'deathNum', lable: '死亡', sortable: 'custom' },
        { prop: 'cureNum', lable: '治愈', sortable: 'custom' }
      ],
      currentPage: 1,
      pageArr: [],
      pageSize: 10,
      centerDialogVisible: false
    };
  },
  watch: {
    fatherData: {
      handler(newVal) {
        this.init = newVal;
        this.getMsg();
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 获取父组件传递过来的信息
    getMsg() {
      if (this.fatherData.state !== 200) {
        // 获取信息失败
        // console.log('获取信息失败')
        return (this.elSate = true);
      } else {
        this.elSate = false;
        this.setTen(this.init.msg);
        this.setTable(this.init.msg.list);
      }
    },
    // 整理十个数据
    setTen(tepData) {
      const tmpList = [
        tepData.addAsymNum,
        tepData.localconNum,
        tepData.add_daily.addjwsr,
        tepData.locIncrNum,
        tepData.econNum,
        tepData.heconNum,
        tepData.gntotal,
        tepData.jwsrNum,
        tepData.curetotal,
        tepData.deathtotal
      ];
      tmpList.forEach((item, i) => {
        this.tenList[i].num = item;
      });
    },
    // 整理表格数据
    setTable(list) {
      this.tableData = list;
      // 设置页码数组
      this.pageArr = [];
      for (let i = 1; i < this.tableData.length; i++) {
        if (this.tableData.length >= i * 10) {
          this.pageArr.push(i * 10);
        } else {
          return this.pageArr.push(this.tableData.length);
        }
      }
    },
    // 第三方组件方法
    // 表格方法
    // 获取表格序号
    getIndex(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    // 排序方法
    handleSortChange(column) {
      this.currentPage = 1; // 排序后返回第一页
      if (column.order === 'descending') {
        this.tableData.sort((a, b) => a[column.prop] - b[column.prop]);
      } else if (column.order === 'ascending') {
        this.tableData.sort((a, b) => b[column.prop] - a[column.prop]);
      }
    },
    // 分页器方法
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  created() {
    this.init = this.fatherData;
    this.getMsg();
  },
  updated() {},
  destroyed() {
    // 在组件销毁时移除事件监听
    window.removeEventListener('resize', this.screenAdapter);
  }
};
</script>

<style lang="less" scoped>
.inN-Epidemic {
  padding-bottom: 2.5rem;
  // 标题
  .title-time {
    margin: 0 0.625rem;
    color: #888;
  }
  // 显示内容
  .inN-body {
    // 全国十大数据
    .ten-data {
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.9375rem;
      // background-color: pink;
      .ten-pannel {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1.3rem;
        width: 20%;
        .ten-title {
          color: #222;
        }
        .ten-value {
          font-size: 2rem;
          font-weight: bolder;
          line-height: 36px;
        }
        .smallFont {
          font-size: 1.6rem;
        }
      }
    }
    // 本土疫情数据
    .local-data {
      position: relative;
      padding: 0 5rem;
      padding-bottom: 50px;
      // background-color: skyblue;
      /deep/.el-table__cell {
        padding: 10px 0;
      }
      // 分页
      .block {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%, 0%);
      }
    }
    // 境外输入top10
    #jwsr-chart {
      // background-color: #45aaf3;
      height: 500px;
    }
  }
}
</style>
